<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title flex">
        <span class="flex-1">最新操作记录</span>
        <span class="col-gray font-thin pointer" @click="goDetail">
          <el-icon><MoreFilled /></el-icon>
          更多</span
        >
      </div>
    </template>
    <pure-table
      :loading="loading"
      :data="tableData"
      :columns="columns"
      maxHeight="500"
      stripe
    />
    <div />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { listApi } from "@/api/logs/monitorLog";
import { useRouter } from "vue-router";

const columns = [
  { prop: "operTime", label: "时间" },
  { prop: "warehouseName", label: "工具室" },
  {
    prop: "userNickName",
    label: "操作人",
    formatter: row => row.userNickName ?? row.userName
  },
  {
    prop: "description",
    label: "操作详情"
  }
];
const tableData = ref([]);
const loading = ref(false);

const initData = async () => {
  loading.value = true;
  await listApi({ pageNum: 1, pageSize: 6 }).then(res => {
    tableData.value = res.rows;
  });
  loading.value = false;
};

initData();

/* 操作 */
const router = useRouter();
const goDetail = () => {
  router.push({
    path: "/logs/monitor"
  });
};
</script>
